<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        #box{
            display: flex;
            justify-content: space-evenly;/*盒子内元素均匀散开*/
            width:360px;
            height:75px;
            margin:30px auto;
            font-size:12px;
            line-height:75px;
        }
        #box>span{
            color:red;
        }
        #box ul{
            display: flex;
            width: 100px;
            height: 20px;
            margin-top: 27px;

        }
        #box ul li{/*li标签是星星*/
            width:20px;
            height:20px;
            background-image: url("./img/01.png");
            cursor:pointer;
        }
        #box ul li.on{/*名字有on的li标签调整星星雪碧图的位置*/
            background-position:0 -27px;
        }
        #box p{
            float:right;
            width: 120px;
            height:70px;
            line-height:20px;
            border:1px solid #ccc;
        }
        #box p span{/*默认p标签里的文本全部先隐藏*/
            display: none;
        }
        #box p span.on{/*p标签里面只有名字为on的span标签才显现*/
            display: block;
        }
    </style>
</head>
<body>
<div id = "box">
   <span>星级评分:</span>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <p>
        <span class = "on">提示:请认真给当前文章打分</span>
        <span>很差</span>
        <span>较差</span>
        <span>还行</span>
        <span>推荐</span>
        <span>力荐</span>
    </p>
</div>
<script>
    //用立执行函数包裹代码
    (function (){
        //先获取元素
        let li = document.querySelectorAll("#box ul li") //类数组
        let span = document.querySelectorAll("#box p span") //类数组
        let ul = document.querySelector("#box ul")

        let index = -1 //先初始化一个下标位置 默认为-1

        //循环为每一个星星li标签添加鼠标移入事件
        for(let i = 0;i < li.length;i++){ //通过序号i可以判断移入的是哪一个星星li标签
            li[i].onmouseenter = function (){ //每一个星星li标签的鼠标移入事件
                //li[i].classList.add("on") //对应的星星li添加类名on 星星显现
                /*
                //通过序号i判断前后，i以及i前面的li标签都要加类名显现星星 所以j<=i
                for(let j = 0;j <= i;j++){ //注意这不是二层循环，而是鼠标移入之后的星星显现循环
                    li[j].classList.add("on") //对应的星星li添加类名on 星星显现
                }

                //i后面的星星li标签都不显现，就要去掉类名on
                for(let j = i + 1;j <= li.length;j++){
                    li[j].classList.remove("on")
                }*/ //这两个for循环可以用下面一个循环表示：操作小星星

                //操作小星星的显示
                for(let j = 0;j < li.length;j++){
                    /*if(j <= i){ //前面的添加on类名
                        li[j].classList.add("on")
                    }else{ //后面的不添加
                        li[j].classList.remove("on")
                    }*/ //可以用三目运算符表示
                    li[j].classList[j<=i?"add":"remove"]("on") //如果j小于等于i，取add，否则取remove
                }

                //操作p标签里面的文字显示
                //先进行排他操作，在显示该li对应span标签显示文字之前，先去掉之前span标签的文字显示
                for(let j = 0;j < span.length;j++){
                    span[j].classList.remove("on")
                }
                span[i+1].classList.add("on")

                //为星星li标签添加点击事件，点击之后改变index下标的值 以便于鼠标离开之后发生变化
                li[i].onclick = function (){
                    index = i //将index下标改成点击之后对应的星星li的下标
                }
            }
        }

        //鼠标离开ul要还原最初的显示文字和星星
        ul.onmouseleave = function (){
            //操作小星星的显示
            for(let j = 0;j < li.length;j++){
                li[j].classList[j<=index?"add":"remove"]("on") //如果j小于等于index即星星li下标，取add，否则取remove
            }

            //操作p标签里面的文字显示
            //先进行排他操作，在显示该li对应span标签显示文字之前，先去掉之前span标签的文字显示
            for(let j = 0;j < span.length;j++){
                span[j].classList.remove("on")
            }
            span[index+1].classList.add("on") //如果没点击对应的li星星，那么下标还是默认的-1，-1+1=0，默认文字
        }
    })()
</script>
</body>
</html>